<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            width: 520px;
            height: 280px;
            border: 1px solid;
            position: relative;
            margin: 0 auto;
            /* overflow: hidden; */
        }

        .imgContainer {
            width: 2600px;
            height: 280px;
            position: absolute;
            left: 0px;

        }

        .imgContainer img {
            float: left;
        }

        .preOrnext {
            width: 520px;
            height: 50px;
            position: absolute;
            top: 40%;
            font-size: 50px;
            z-index: 10;
            color: white;
        }

        .pre {
            float: left;
        }

        .next {
            float: right;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="preOrnext">
            <span class="pre">
                < </span>
                    <span class="next">></span>
        </div>
        <div class="imgContainer">
            <img src="./imgs/1t.png" alt="">
            <img src="./imgs/2t.png" alt="">
            <img src="./imgs/3t.png" alt="">
            <img src="./imgs/4t.png" alt="">
            <img src="./imgs/5t.png" alt="">
        </div>
    </div>
    <script>
        var imgContainerEle = document.querySelector(".imgContainer");
        var containerEle = document.querySelector(".container");
        // document.onclick = function(){
        //     move(imgContainerEle,"left",-520,function(){
        //         console.log("运动完成");
        //     })
        // }
        var page = 1;

        function autoPlay() {
          var timer =   setInterval(function () {
                move(imgContainerEle, "left", -520 * page-520, function () {
                    page++;
                    console.log(page);
                    if (page == 6) {
                        page = 1;
                        imgContainerEle.style.left = "-520px";
                    }
                });
            }, 2000)

            // 当鼠标移入的时候 停止自动轮播 当鼠标离开的时候 又需要自动轮播
            containerEle.onmouseenter = function(){
                console.log("enter")
                // 停止轮播
                clearInterval(timer);
            }
            containerEle.onmouseleave = function(){
                console.log("leave");
                autoPlay();
            }

        }
        autoPlay()







        // 1.复制第一张图到最后一张图的后面
        // 2.复制最后一张图 放在第一张之前；
        function cloneImg() {
            imgContainerEle.style.width = "3640px";
            // 获取第一张图片
            var fImg = imgContainerEle.firstElementChild;
            // 复制一份第一张图片
            var fCopyImg = fImg.cloneNode(true);

            // 获取最后一张图
            var lImg = imgContainerEle.lastElementChild;

            // 复制最后一张图
            var lCopyImg = lImg.cloneNode(true);

            imgContainerEle.insertBefore(lCopyImg,fImg)

            // 把复制的图片放在第五张后面；
            imgContainerEle.appendChild(fCopyImg);

            imgContainerEle.style.left = "-520px";
        }

        cloneImg()


        // 点击下一页的按钮 
        // 获取下一页的按钮 
        var nexEle = document.querySelector(".next");
        nexEle.onclick = function(){
            move(imgContainerEle, "left", -520 * page-520, function () {
                    page++;
                    console.log(page);
                    if (page == 6) {
                        page = 1;
                        imgContainerEle.style.left = "-520px";
                    }
                });
        }


        // 点击上一页功能
        var preEle= document.querySelector(".pre");
        preEle.onclick = function(){
            move(imgContainerEle, "left", -520 * page+520, function () {
                    page--;
                    console.log(page);
                    if(page==0){
                        page = 5;
                        imgContainerEle.style.left = "-2600px";
                    }
            });
        }


        function move(boxEle, dir, dis, cb) {
            function fn() {
                var num = parseInt(getComputedStyle(boxEle)[dir]);
                var res = dis > num ? 1 : -1;
                var speed = 20 * res;
                boxEle.style[dir] = num + speed + "px";
                if ((num + speed) == dis) {  // Math.abs( (num +speed)-dis)<5;
                    cb && cb();
                } else {
                    window.requestAnimationFrame(fn);
                }
            }
            fn();
        }
    </script>
</body>

</html>